<!-- main content -->
<div class="container">

    <div class="row-fluid">
        <div class="span12">
            <div class="w-box hideable">
                <div class="w-box-header">
                    <h4>Новый номер</h4>
                </div>
                <div class="w-box-content">
                    <div class="offset1"><br/>

                        <form id="create_sim" action="ajax/createSim.php" method="post">
                            <input id="create_sim_number" name="create_sim_number" type="text" value=""
                                   placeholder="Введите номер" class="span3"><br/>
                            <input id="create_sim_puk" name="create_sim_puk" type="text" value=""
                                   placeholder="Введите ICCID" class="span3">

                            <div class="formSep sepH_b">
                                <button id="create_sim_submit" class="btn btn-beoro-3" type="submit">Сохранить</button>
                                <a href="#" class="btn btn-link">Отменить</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer_space"></div>
    </div>

    <div class="row-fluid">
        <div class="span12">
            <div class="w-box hideable">
                <div class="w-box-header">
                    <h4>Пул номеров</h4>
                </div>
                <div class="w-box-content">
                    <table class="table table-vam table-striped" id="sim_list_table">
                        <thead>
                        <tr>
                            <th>№</th>
                            <th>ID</th>
                            <th>Номера</th>
                            <th>ICCID</th>
                            <th>Действия</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
        <div class="footer_space"></div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".remove_sim").live('click', function (e) {
                var del_sim = $(this).closest("tr");
                var del_sim_number = $(del_sim).children("td.sim_number").text();
                var del_sim_id = $(del_sim).children("td.sim_id").text();
                e.preventDefault();
                bootbox.confirm("Вы уверены что хотите удалить номер " + del_sim_number + " ?", function (confirmed) {
                    if (confirmed == true) {
                        $.ajax({
                            url: "ajax/removeSim.php",
                            dataType: "json",
                            type: "POST",
                            data: {del_sim: del_sim_id},
                            success: function (data) {
                                $.sticky(data.message, {autoclose: 3000, position: "top-center", type: "st-success"});
                                loadDataSim('#sim_list_table', 'ajax/loadListSim.php');
                            },
                            error: function (data) {
                                $.sticky(data.message, {autoclose: 3000, position: "top-center", type: "st-error"});
                            }
                        });
                    } else {
                        return false;
                    }
                });
            });
        });
    </script>
    <script type="text/javascript">

        function loadDataSim(target, sAjaxSource) {
            $(target).dataTable({
                "iDisplayLength": 50,
                "oLanguage": {
                    "sProcessing": "Подождите..."
                },
                "bDestroy": true,
                //"bStateSave": true,
                "sPaginationType": "bootstrap",
                "bProcessing": true,
                "sAjaxSource": sAjaxSource,
                "aaSorting": [
                    [ 0, "asc" ]
                ],
                "aoColumns": [
                    { "sType": "formatted-num" },
                    { "sType": "formatted-num", "sClass": "sim_id" },
                    { "sType": "formatted-num", "sClass": "sim_number" },
                    { "sType": "formatted-num" },
                    { "bSortable": false, "sClass": "sim_toolbar", "sType": "html"}
                ]
            });

        }
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            loadDataSim('#sim_list_table', 'ajax/loadListSim.php');
        });
    </script>
    <!-- jQuery form -->
    <script type="text/javascript">
        $(document).ready(function () {
            // bind form using ajaxForm
            $('#create_sim').ajaxForm({
                beforeSubmit: validate,
                // dataType identifies the expected content type of the server response
                dataType: 'json',
                // success identifies the function to invoke when the server response
                // has been received
                success: processJson
            });
        });
        function processJson(data) {
            // 'data' is the json object returned from the server
            loadDataSim('#sim_list_table', 'ajax/loadListSim.php');
            $.sticky(data.message, {autoclose: 6000, position: "top-center", type: data.type});
            $('#create_sim').trigger( 'reset' );
        }
        function validate(formData, jqForm, options) {
            // formData is an array of objects representing the name and value of each field
            // that will be sent to the server;  it takes the following form:
            //
            // [
            //     { name:  username, value: valueOfUsernameInput },
            //     { name:  password, value: valueOfPasswordInput }
            // ]
            //
            // To validate, we can examine the contents of this array to see if the
            // username and password fields have values.  If either value evaluates
            // to false then we return false from this method.


            if ($("#create_sim_number").val() == '') {
                bootbox.alert("Укажите правильный номер", function () {
                });
                return false;
            }
        }
    </script>